﻿<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <meta charset="utf-8" />
    <script src="../Scripts/jquery-1.9.1.min.js"></script>
    <link href="../Content/bootstrap.css" rel="stylesheet" />
    <script src="../Scripts/bootstrap.js"></script>
    <link href="../css/bootstrap-slider.min.css" rel="stylesheet" />
    <script src="../Scripts/bootstrap-slider.min.js"></script>
</head>
<body>
    <style>
        #canvas {
            background: white;
        }
    </style>
    <div class="container">
        <button class="btn btn-primary" id="playBtn">
            <i class="glyphicon glyphicon-pause"></i>
        </button>
        <audio id="audio"></audio>
    </div>
    <canvas id="canvas" width="800" height="300"></canvas>
    <script>
        var url = '../content/audio/海阔天空.mp3';
        if (!window.AudioContext) {
            alert('您的浏览器不支持AudioContext');
        } else {
            //创建上下文
            var atx = new AudioContext();
            var source = null;
            var audio = document.getElementById('audio');
            //使用Ajax获取音频文件
            var request = new XMLHttpRequest();
            request.open('GET', url, true);
            request.responseType = 'arraybuffer';//配置数据的返回类型
            //加载完成
            request.onload = function () {
                var arraybuffer = request.response;
                atx.decodeAudioData(arraybuffer, function (buffer) {
                    //创建分析器
                    source = atx.createMediaElementSource(audio);
                    source
                    console.info(source);
                    var gainNode = atx.createGain();
                    source.connect(gainNode);
                    gainNode.connect(atx.destination);

                    // Create variables to store mouse pointer Y coordinate
                    // and HEIGHT of screen
                    var CurY;
                    var HEIGHT = window.innerHeight;
                    // Get new mouse pointer coordinates when mouse is moved
                    // then set new gain value

                    document.onmousemove = updatePage;
                    function updatePage(e) {
                        CurY = (window.Event) ? e.pageY : event.clientY + (document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop);

                        gainNode.gain.value = CurY / HEIGHT;
                    }


                    ////将source与分析器链接
                    //source.connect(analyser);
                    ////将分析器与destination链接，这样才能形成到达扬声器的通路
                    //analyser.connect(atx.destination);
                    ////将解码后的buffer数据复制给source
                    //source.buffer = buffer;
                    ////播放
                    //audio.play();



                }, function (e) {
                    console.info('处理出错');
                });
            }
            request.send();
            //绑定播放按钮
            $('#playBtn').click(function () {
                var icon = $(this).find('i');;
                icon.toggleClass('glyphicon-play').toggleClass('glyphicon-pause');
                //停止播放
                // source.stop();
                audio.pause();
            });
        }
    </script>
</body>
</html>
